<template>
  <div id="contain">
    <a-button
    v-if="isEditBusiness"
    class="u-btn"
      style="background-color: #ff6a00 !important; border-color: #ff6a00; color: #fff"
      type="default"
      @click="addRecord"
    ><a-icon type="add" />调整团队成员</a-button>
    <a-table id="table" :columns="columnsList" :data-source="list" :pagination="false" :scroll="{ y: 400 }">
      <span v-if="isEditBusiness" slot="action" slot-scope="text,record,index">
        <a @click="showRenameItem(index,record)" v-if="partyId != record.partyId">编辑</a>
        <a-divider type="vertical" v-if="partyId != record.partyId"/>
        <a @click="showRelItem(index,record)" v-if="partyId != record.partyId">移除</a>
        <a-divider type="vertical" v-if="partyId == record.partyId"/>
        <a @click="showDeleteItem(index,record)" v-if="partyId == record.partyId">退出团队</a>
      </span>
    </a-table>
    <crm-role-modal v-if="postParams.objectId" ref="role" :objectId="postParams.objectId" :source="source" @ok="getDetail"></crm-role-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { getAction } from '@/api/manage'
  import axios from 'axios'
  import CrmRoleModal from '@/views/crm/role/modules/CrmRoleModal.vue'
  export default {
    name: 'RelativeContacts',
    props: {
      /** 模块ID */
      id: [String, Number],
      source: [String],
      isEditBusiness: {type: Boolean,default: true,}
    },
    data() {
      return {
        partyId:Vue.ls.get('Login_Userinfo').partyId,
        showUploadList: false,
        // 重命名
        renameVisible: false,
        uploadText: '上传',
        columnsList: [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          // {
          //   title: '职位',
          //   dataIndex: 'typeId_dictText',
          //   key: 'typeId_dictText',
          //   // width: 100,
          // },
          {
            title: '角色',
            dataIndex: 'typeId_dictText',
            key: 'typeId_dictText',
          },
          {
            title: '权限',
            key: 'isReadWrite_dictText',
            dataIndex: 'isReadWrite_dictText',
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        list: [],
        postParams: {
          objectId: this.id,
        },
        newName: '',
        fileId: '',
        url: {
          pagingCrmCustomerRoleList: '/online/api/pagingCrmCustomerRoleList',
          createCrmCustomerRoleMany: '/online/upload/createCrmCustomerRoleMany',
          updateCrmCustomerRole: '/online/upload/updateCrmCustomerRole',
          removeCrmCustomerRole: '/online/upload/removeCrmCustomerRole',
        },
      }
    },
    components: {
      CrmRoleModal,
    },
    watch: {
      id(val){
        this.getDetail()
      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        const params = {}
        params[`objectId`] = this.id
        getAction(this.url.pagingCrmCustomerRoleList, params)
          .then((res) => {
            if (res.success) {
              this.list = res.result
            }
          }).catch(() => {})
      },
      addRecord(){
        this.$refs['role'].add();
      },
      showRelItem(index,record) {
        const that = this
        this.$confirm({
          title: '提示',
          content: '您确定要取消移除人员吗？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            getAction(that.url.removeCrmCustomerRole, {objectId:record.objectId,partyId:record.partyId,isAdmin:'N'}).then((res) => {
              if (res.success) {
                that.$message.success('成功！')
                that.getDetail()

              } else {
                that.$error(res.message)
              }
            })
          },
          onCancel() {},
        })
      },
      // 删除操作
 showDeleteItem(index,record) {
        const that = this
        this.$confirm({
          title: '提示',
          content: '您确定要退出团队吗？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            getAction(that.url.removeCrmCustomerRole, {objectId:that.id,partyId:record.partyId}).then((res) => {
              if (res.success) {
                that.$message.success('成功！')
                that.getDetail()

              } else {
                that.$error(res.message)
              }
            })
          },
          onCancel() {},
        })
      },
      showRenameItem(index,record) {
        this.$refs['role'].edit(record);
      },
    },
  }
</script>

<style lang="less" scoped>
#contain{
  position: relative;
  .u-btn{
    position: absolute;
    top: 0;
    right: 0;
  }
  #table{
    position: absolute;
    top: 50px;
  }
}
  /deep/ .ant-btn {
    color: #fff;
    background-color: #168a40;
    border-color: #168a40;
  }
  /deep/ .ant-table {
    border: 1px solid rgb(230, 230, 230);
  }
</style>